<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    let a = 123;// number 正常渲染
    const str = 'abc'; // string 正常渲染
    const flag = true; //  true 和 false 都不渲染
    // 其他类型 null 和 undefined 也不渲染
    /*
       u undefined -> 不渲染
    *  s string -> 渲染
    *  o Object
            {} 报错
            [] 遍历渲染
       n number -> 渲染
       b boolean -> 不渲染
    *
    *
    *
    *
    *
    *
    * */
    // {/**/}
    root.render(
        (
            <div>
                <h3>基本数据类型 number</h3>
                <p>{a}</p>
                <hr/>
                <h3>字符串</h3>
                <p>{str}</p>
                <hr/>
                <h3>布尔类型</h3>
                <p>{flag}</p>
                <hr/>
                <h3>Object对象-报错</h3>
                <p><span>{/*{username: "前端小王子"}*/}</span></p>
                <hr/>
                <h3>Object对象-数组</h3>
                <p><span>{[1,2,3,4,5,]}</span></p>
                <h3>三元表达式</h3>
                <p>{flag?'加载中': '加载失败'}</p>

            </div>
        )
    );
</script>
</body>
</html>